<template>
  <el-row>
    <el-col :span="12" class="el-row">
      <el-form-item label="主营品牌" prop="carBrandId">
        <el-select filterable v-model="my_id" size="medium" multiple disabled placeholder="请选择经销商名称">
          <el-option label="请选择主营品牌" value="">
          </el-option>
          <el-option v-for="(item,index) in dealerArray" type="textarea" :label="item.name" :value="item.id" :key="index">
          </el-option>
        </el-select>
      </el-form-item>
    </el-col>
      <el-popover popper-class="el-popovers" placement="right-start"  width="500" trigger="click">
      <el-table 
            :filter-multiple="false" 
            ref="multipleTable" 
            :data="dealerArray" 
            tooltip-effect="dark" 
            :style="{ height:'800px',widht:'100%' , overflow:'scroll'}"
             @cell-click="setClass" 
             @selection-change="handleSelectionChange">
        <el-table-column type="selection" ref='redio' >
        </el-table-column>
        <el-table-column label="品牌logo" width="120">
          <template scope="scope">
            <img class='imgs' :src="scope.row.icon" alt="">
          </template>
        </el-table-column>
        <el-table-column prop="name" label="主营品牌">
        </el-table-column>
      </el-table>

      <el-button v-if="!isDisabled" slot="reference">选择</el-button>
    </el-popover>

    
  </el-row>
</template>


 

<script>
  export default {
    data() {
      return {
        arr: [],
        value: '',
        my_id:[],
      }
    },
    methods: {
      handleSelectionChange(val) { //选择项被选中时触发事件，获取主营品牌数组,发射id数组给父组件。
        if(val.length>10){
                    this.$message.warning('选择的主营品牌不能超过10个');
                    val = val.filter((item,index)=>{return index<10})

                    /*超过10个不可选，先清除选好的，再指定val*/ 

                    this.$refs.multipleTable.clearSelection();
                    val.forEach(item => {this.$refs.multipleTable.toggleRowSelection(item);});
                    return
                  }   
        
        if (val.length > 0) {

                  switch (this.Choice) { //true 多选 false 单选
                    case true:
                      this.arr = val.map(item => { return item})      
                      break;
                    default:
                      val.length > 1 ? val.shift() : null
                      this.arr = val.filter((item, index) => { return index == 0 })
                      break;
                  }
                  this.my_id = this.arr.map((item,index)=>{return item.id});    // 筛选出id
      
                  const emitId =  this.Choice==false?this.my_id[0]:this.my_id;             //发射给父组件的id
                  this.$emit('pinpai', emitId)
                
        }
      },

    },
    props: ['dealerArray', 'Choice',"id","isDisabled"],
    mounted(){     
            const getType = Object.prototype.toString ;       //判断数据类型     //多选操作  绑定的数据只能是数组 ；
            // this.id = this.id.split(',') ;
            switch(getType.call(this.id)){
              case "[object Number]" :
                    this.my_id.push(this.id);
                    break 
              case "[object Array]"  :
                    this.my_id=this.id.map((item)=>{return +(item)});       // 字符串转成数组 ；
                    break;
               case "[object Null]" :  
                break 
              default:
              break
            }
            
      
      this.$nextTick(()=>{        
        let labels = document.getElementsByClassName("el-checkbox");
        labels[0].style.display="none"          //隐藏全选按钮
      })      
           
    },
  }
</script>





<style lang="scss" scoped>
  .imgs {
    width: 24px;
    height: 24px;
  }

  // .el-row,
  // .el-col,
  // .el-col-12 {
  //   display: flex;
  // }
 
</style>
